{% extends 'base/base.html' %}

{% block title %}仪表盘 - 多用户报警系统{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div class="d-flex items-center gap-3">
            <h1 class="h2 m-0">
                <i class="fa fa-tachometer-alt" aria-hidden="true"></i> 仪表盘
            </h1>
        </div>
        <div>
            <a href="{% url 'projects:project_create' %}" class="btn btn-primary">
                <i class="fa fa-plus" aria-hidden="true"></i> 创建项目
            </a>
            {% if is_super_admin %}
            <a href="{% url 'tasks:scheduled_task_list' %}" class="btn btn-success ml-2">
                <i class="fa fa-clock" aria-hidden="true"></i> 定时任务管理
            </a>
            {% endif %}
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.total_messages }}</h4>
                            <p class="card-text">总消息数</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-envelope fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.pending_messages }}</h4>
                            <p class="card-text">待处理</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-clock fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.processed_messages }}</h4>
                            <p class="card-text">已处理</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-check fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.total_projects }}</h4>
                            <p class="card-text">项目数量</p>
                        </div>
                        <div class="align-self-center">
                            <i class="fa fa-project-diagram fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧：消息列表 -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fa fa-list" aria-hidden="true"></i> 所有消息
                    </h5>
                    <span class="badge bg-secondary">{{ stats.total_messages }}</span>
                </div>
                <div class="card-body p-0">
                    {% if user_messages %}
                        <div class="table-responsive">
                            <table class="table table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th width="20%">项目</th>
                                        <th width="25%">消息内容</th>
                                        <th width="10%">类型</th>
                                        <th width="10%">状态</th>
                                        <th width="10%">创建时间</th>
                                        <th width="15%">处理时间/处理人</th>
                                        <th width="10%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for message in user_messages %}
                                        <tr>
                                            <td>
                                                <a href="{% url 'projects:project_detail' message.project.id %}" class="text-decoration-none">
                                                    <strong>{{ message.project.name }}</strong>
                                                </a>
                                            </td>
                                            <td>
                                                <div class="text-truncate" style="max-width: 250px;">
                                                    {{ message.content|truncatechars:45 }}
                                                </div>
                                            </td>
                                            <td>
                                                {% if message.message_type == 'webhook' %}
                                                    <span class="badge bg-primary">
                                                        {{ message.get_message_type_display|default:"webhook消息" }}
                                                    </span>
                                                {% elif message.message_type == 'announcement' %}
                                                    <span class="badge bg-warning">
                                                        {{ message.get_message_type_display|default:"公告消息" }}
                                                    </span>
                                                {% else %}
                                                    <span class="badge bg-info">
                                                        {{ message.get_message_type_display|default:"普通" }}
                                                    </span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if message.status == 'pending' %}
                                                    <span class="badge bg-warning">待处理</span>
                                                {% else %}
                                                    <span class="badge bg-success">已处理</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ message.created_at|date:"m-d H:i" }}
                                                </small>
                                            </td>
                                            <td>
                                                {% if message.status == 'processed' %}
                                                    <small class="text-muted">
                                                        {{ message.processed_at|date:"m-d H:i" }}<br>
                                                        <span class="text-primary">{{ message.processed_by.username|default:"系统" }}</span>
                                                    </small>
                                                {% else %}
                                                    <span class="text-muted">-</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <a href="{% url 'projects:message_detail' message.project.id message.id %}" 
                                                        class="btn btn-outline-primary btn-sm" title="查看详情">
                                                         <i class="fa fa-eye"></i>
                                                     </a>
                                                     {% if message.status == 'pending' %}
                                                         <form method="post" action="{% url 'projects:message_toggle_status' message.project.id message.id %}" class="d-inline">
                                                            {% csrf_token %}
                                                            <button type="submit" class="btn btn-outline-success btn-sm" title="标记为已处理">
                                                                <i class="fa fa-check"></i>
                                                            </button>
                                                        </form>
                                                    {% endif %}
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页 -->
                        {% if page_obj.has_other_pages %}
                            <nav aria-label="Page navigation" class="mt-3">
                                <ul class="pagination justify-content-center">
                                    {% if page_obj.has_previous %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                                <span aria-hidden="true">&laquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                    
                                    {% for num in page_obj.paginator.page_range %}
                                        {% if page_obj.number == num %}
                                            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                                        {% else %}
                                            <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
                                        {% endif %}
                                    {% endfor %}
                                    
                                    {% if page_obj.has_next %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                                <span aria-hidden="true">&raquo;</span>
                                            </a>
                                        </li>
                                    {% endif %}
                                </ul>
                            </nav>
                        {% endif %}
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fa fa-inbox fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">暂无消息</h5>
                            <p class="text-muted">您参与的项目还没有收到任何消息</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 右侧：项目列表和公告 -->
        <div class="col-lg-4">
            <!-- 项目列表 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-project-diagram" aria-hidden="true"></i> 我的项目
                    </h5>
                </div>
                <div class="card-body p-0">
                    {% if user_projects %}
                        <div class="list-group list-group-flush">
                            {% for project in user_projects %}
                                <a href="{% url 'projects:project_detail' project.id %}" 
                                   class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
                                    <div>
                                        <h6 class="mb-1">{{ project.name }}</h6>
                                        <small class="text-muted">{{ project.description|truncatechars:30 }}</small>
                                    </div>
                                    <span class="badge bg-primary rounded-pill">
                                        {{ project.message_set.count }}
                                    </span>
                                </a>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fa fa-folder-open fa-2x text-muted mb-2"></i>
                            <p class="text-muted">暂无项目</p>
                            <a href="{% url 'projects:project_create' %}" class="btn btn-primary btn-sm">
                                <i class="fa fa-plus"></i> 创建项目
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- 公告列表 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-bullhorn" aria-hidden="true"></i> 公告
                    </h5>
                </div>
                <div class="card-body p-0">
                    {% if announcements %}
                        <div class="list-group list-group-flush">
                            {% for announcement in announcements|slice:":5" %}
                                <div class="list-group-item">
                                    <div class="d-flex w-100 justify-content-between">
                                        <h6 class="mb-1">{{ announcement.title }}</h6>
                                        <small class="text-muted">{{ announcement.created_at|date:"m-d" }}</small>
                                    </div>
                                    <p class="mb-1 small">{{ announcement.content|truncatechars:50 }}</p>
                                    {% if announcement.tags.all %}
                                        <div class="mt-1">
                                            {% for tag in announcement.tags.all %}
                                                <span class="badge bg-secondary me-1">{{ tag.name }}</span>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                        <div class="card-footer text-center">
                            <a href="{% url 'projects:announcement_list' %}" class="btn btn-outline-primary btn-sm">
                                查看所有公告
                            </a>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i class="fa fa-bullhorn fa-2x text-muted mb-2"></i>
                            <p class="text-muted">暂无公告</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascript %}
<script>
// 添加页面加载动画效果
document.addEventListener('DOMContentLoaded', function() {
    // 为统计卡片添加悬停效果
    const cards = document.querySelectorAll('.card');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.transition = 'transform 0.2s ease';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });

    // 自动刷新页面（可选）
    // setTimeout(function() {
    //     location.reload();
    // }, 30000); // 30秒刷新一次
});
</script>
{% endblock %}